background 如字面所示,主要用途是設定網頁中元素的背景,實際上 background
是一個CSS 縮寫,它的值是由多個 CSS 屬性所組成,原始碼撰寫方式如下
background: gray url("amos.png") scroll no-repeat 50% 50% / 50% 50%;
我們可以看到多個值串起來有點驚人啊!目前完整的寫完可以高達 8 個值, 這時候就需要特別注意到值的順序問題了,一但寫錯就可能整段都失效,請各位新手與開發者千萬要注意再注意!
由前面我們可以看到一個背景屬性有非常多的不同項目可以設定,以金魚必學的 CSS 屬性來說,Amos 簡單條列於下
奇怪了!前面明明提到 background
最多到 8 個值,但為何屬性卻只有 6 個呢?主要是其中兩個屬性分別可以設定兩個值,加起來就變成驚人的 8 個值了。
了解了是哪幾個 background
的屬性之後,我們就可以把 background
簡寫的值順序抓出來了,background
值的順序如下
background: color image attachment repeat poition / size
這邊請注意到最後面的那條斜線,該斜線是很重要的,為何要有斜線?主要是要區隔 background-position
與 background-size
,由於這兩個屬性的值中,除了關鍵字以外也可以使用數值單位,那麼就可能會出現下面這樣的原始碼
background: gray url("amos.png") scroll no-repeat 50% 50% / 50% 50%;
是不是看的很暈? 4 個 50% 分別是甚麼東西啊?有了斜線之後,斜線左側的會被視為 background-position
,右側則會被視為 background-size
,是不是變的單純的多了。這樣的話我們也可以使用關鍵字來設定,像是下面這樣
background: gray url("amos.png") scroll no-repeat center center / 50% 50%;
從之前所寫的「Background-position- 金魚都能懂的CSS必學屬性」可以得知 background-position
可以僅設定一個值,另一個會自動預設 center
來看,我們也可以把原始碼更節省的改成下面這樣
background: gray url("amos.png") scroll no-repeat center / 50% 50%;
是不是變的簡略多了,少打幾個字我就能提早下班了,好屬性不學多麼可惜啊!
由於瀏覽器本身都會有 CSS 的預設值,所以當我們不設定明確的 background
相關值時,background
會值接採用瀏覽器預設的值(真正的原理其實是 CSS 優先權問題),所以其實每一個值都可以選擇寫或不寫,很彈性對吧!但 background
撰寫時需要特別注意的則是「 background-position
/ background-size
」這「一組」值,會說它是「一組」的原因很明顯,因為他們在有條件下是必須要一起在斜線的左右出現的。
「 background-position
/ background-size
」在僅有 background-position
時,可以不需要出現斜線,background-size
出現時,必定要與 background-position
與斜線同時撰寫,否則你的原始碼會失效,讓我們來看看下方正常以及會失效的寫法。
可正常執行的寫法
background: url("amos.png") no-repeat center
或
background: url("amos.png") no-repeat center / 50% 50%;
或
background: url("amos.png") no-repeat center / cover;
會失效的寫法
background: url("amos.png") no-repeat / 50% 50%;
或
background: url("amos.png") no-repeat / cover;
或
background: url("amos.png") no-repeat center cover;
以上有興趣的朋友都可以實際的撰寫試玩看看(是要玩甚麼啦XD)
background 由於是 CSS 簡寫屬性,所以我們可能不小心會出現以下寫法!
background: red url("amos.png") center center;
background-color: black;
上面這樣的寫法是有可能出現在實際專案中的,一部分有可能是因為開發者的粗心大意,但有時候卻可能是刻意為之,先來了解這樣的寫法會出現的結果是甚麼?由於 CSS 優先權的問題所致,所以這兩行 CSS background 設定的結果會是「黑色底 + Amos 的相片置中於該容器中」。也就是說第 1 行的 red
被第 2 行的 black
覆寫了,由於 background-image 、 background-position 的屬性沒有被覆寫,所以依舊會套用上去。
那麼會刻意使用這樣的寫法是甚麼情況呢?假設我們在一個頁面中有一個基本的區塊背景設定,但每個區塊的背景色彩會不一樣,背景圖片也不一樣,那麼我們就可以採用以下方式來省下一些重複的原始碼,先看看我們尚未套用簡寫的的原始碼可能會長怎樣
HTML
<div class="amos">...略</div>
<div class="gold">...略</div>
<div class="fish">...略</div>
<div class="teaching">...略</div>
CSS
.amos{
background-color: #faa;
background-image: url("amos.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50% auto;
}
.gold{
background-color: #ffa;
background-image: url("gold.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50% auto;
}
.fish{
background-color: #fa0;
background-image: url("fish.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50% auto;
}
.teaching{
background-color: #666;
background-image: url("teaching.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50% auto;
}
是不是有些驚人的恐怖!當然!如果你公司始採用原始碼行數來決定你的績效的話,這段原始碼絕對可以讓你獲得不錯的成績(喂!別亂教人啊)。這樣的 CSS 原始碼對於有經驗的開發者,通常我們可以把相同的設定取出來,並使用「CSS 群組式宣告 - 每個開發者都該學會的選取方式」改寫成下面這樣
.amos,
.gold,
.fish,
.teaching{
background-repeat: no-repeat;
background-position: center;
background-size: 50% auto;
}
.amos{
background-color: #faa;
background-image: url("amos.png");
}
.gold{
background-color: #ffa;
background-image: url("gold.png");
}
.fish{
background-color: #fa0;
background-image: url("fish.png");
}
.teaching{
background-color: #666;
background-image: url("teaching.png");
}
但這樣的寫法好像還是有改進的空間,所以其實我們可以利用縮寫方式來改寫成下面這樣
.amos,
.gold,
.fish,
.teaching{
background: no-repeat center / 50% auto;
}
.amos{
background-color: #faa;
background-image: url("amos.png");
}
.gold{
background-color: #ffa;
background-image: url("gold.png");
}
.fish{
background-color: #fa0;
background-image: url("fish.png");
}
.teaching{
background-color: #666;
background-image: url("teaching.png");
}
是不是利用一行縮寫就能讓我們大幅的減少冗長的背景設定呢?且原始碼的閱讀也不受影響,可謂是超級方便的啦!寫道這相信大家也都手癢了吧,不多說,快去試著寫看看還有哪些變化應用吧!「金魚都能懂的CSS必學屬性」,下篇見啦!
「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學